<template>
  <div class="coursesOpened">
    <div class="coursesList">
      <!-- <div v-for="(item, index) in coursesData" :key="index"> -->
      <!-- <h2>{{ item.cName }}</h2> -->
      <div v-if="!deleteCourses.length">暂无课程</div>
      <el-row class="item-list">
        <el-col
          :xs="11"
          :sm="7"
          :md="7"
          :lg="5"
          :xl="5"
          v-for="(citem, cindex) in deleteCourses"
          :key="cindex"
          class="coursesContent hover_boxShadow_defaut_shadow"
          :class="{
            twoisLast: !((cindex + 1) % 2),
            treeisLast: !((cindex + 1) % 3),
            fourisLast: !((cindex + 1) % 4),
          }"
        >
          <router-link
            :to="{
              name: 'store_browseDetail',
              query: {
                courseId: citem.courseID,
                currNo: citem.currNo,
              },
            }"
          >
            <div class="coursesImg">
              <img
                v-lazy="citem.iconPath"
                :title="citem.name || '【开课名称】'"
              />
              <!-- : src[Math.floor(Math.random() * (11 - 1)) + 1] -->
            </div>
            <div class="courseInfo">
              <div class="name" :title="citem.name || '【开课名称】'">
                {{ citem.name || "【开课名称】" | filterName }}
              </div>
              <!-- <div class="pushTime">
                {{ `发布时间${citem.publishTime}` | filterTime }}
              </div> -->
              <div class="desc" :title="citem.currDesc || '无'">
                简介：{{ citem.currDesc || "无" }}
              </div>
              <div class="desc">
                教师：{{ citem.tutorStaffUserName || "无" }}
              </div>
              <div class="desc">
                设计：{{ citem.mainDesignerUserName || "【设计师】" }}
              </div>
              <div class="desc">
                选修时间：{{ citem.openChooseTime || "无" | filterTime }} ~
                {{ citem.closeChooseTime || "无" | filterTime }}
              </div>
              <div class="desc">已选人数：{{ citem.choosedNum || 0 }}</div>
              <div class="desc">
                上课时间：{{ citem.startTeachingTime || "无" | filterTime }} ~
                {{ citem.finishTeachingTime || "无" | filterTime }}
              </div>
            </div>
            <div class="btnBox">
              <div
                class="updateBtnBox"
                @click.stop.prevent="handleUpdateCourseInfo(citem)"
              >
                恢复课程
              </div>
            </div>
          </router-link>
        </el-col>
      </el-row>
      <!-- </div> -->
      <el-dialog
        :visible.sync="dialogVisible"
        width="240px"
        custom-class="closeCourseDialog"
        @close="handelClsoe"
      >
        <div class="content">
          <div>是否确认恢复课程！</div>
          <div class="btnBox">
            <el-button @click="handelClsoe">取消</el-button>
            <el-button type="primary" @click="handleRecovery">确认</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
    <setCourseInfo :courseData="courseData" :isShow="isShow" :isOpen="false" />
  </div>
</template>

<script>
import { getCurriculumlist, updatecurr } from "@/request/courses";
// import { renderTime } from '@/util/tool.js'
import { mapState } from "vuex";
import { location, toMs } from "@/util/tool";
import setCourseInfo from "@/views/coursesStore/list/component/setCourseInfo";
import { Session } from "@/util/storage/session"
export default {
  components: {
    setCourseInfo,
  },
  data() {
    return {
      coursesData: [],
      dialogVisible: false,
      openCourseData: {}, // 发布课程的数据
      location: location(window),
      courseData: {},
      isShow: false,
    };
  },
  filters: {
    filterName(value) {
      // return value.substring(0,value.lastIndexOf('_') == -1 ? value.length:value.lastIndexOf('_'));
      return value.substring(
        0,
        value.lastIndexOf("_") == -1 ? value.length : value.lastIndexOf("_")
      );
    },
    filterTime(val) {
      const time = new Date(val);
      if (time == "Invalid Date") return val;
      return `${time.getFullYear()}-${
        time.getMonth() + 1
      }-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      CurrState: (state) => state.courses.CurrState,
      deleteCourses: (state) => state.courses.deleteCourses,
    }),
  },
  created() {
    this.fetchCurriculumlist();
  },
  methods: {
    // 获取可选修课程
    async fetchCurriculumlist() {
      await this.$store.dispatch("courses/fetchCoursesList",{ state: "撤销" })
      // getCurriculumlist({ state: "撤销" }).then((data) => {
      //   // if (res.errno === 0) {
          // data = data?.filter(
          //   (item) => item.publishStaffUserID == this.userInfo.userID
          // );
      //     this.coursesData = data?.reverse() || [];
      //   // }
      // });
    },
    // 关闭弹窗
    handelClsoe() {
      this.dialogVisible = false;
    },
    handleUpdateCourseInfo(item) {
      this.dialogVisible = true;
      this.openCourseData = item;
      // this.courseData = item;
      // this.isShow = true;
    },
    // 恢复课程
    handleRecovery() {
      if (this.openCourseData.publishStaffUserID !== this.userInfo.userID)
        return this.$antdMessage.error({
          content: "该课程不是您开设，无法恢复！",
        });
      let params = this.openCourseData;
      params["userID"] = this.userInfo.userID;
      params.publishTime = toMs(params.publishTime);
      params.startTeachingTime = toMs(params.startTeachingTime);
      params.finishTeachingTime = toMs(params.finishTeachingTime);
      params.closeChooseTime = toMs(params.closeChooseTime);
      params.openChooseTime = toMs(params.openChooseTime);
      params.credit = Number(params.credit);
      params.state = this.CurrState.IsKeepOpen;
      params.taskSettings = params.taskSettings ? params.taskSettings: {}
      updatecurr(params)
        .then(async (res) => {
          if (res.errno === 0) {
            Session.remove(`/api/curriculum/list?state=撤销`)
            Session.remove(`/api/curriculum/list`)
            Session.remove(`/api/choose/mylist?userID=${this.userInfo.userID}`)
            await this.fetchCurriculumlist()
            this.handelClsoe();
            this.$antdMessage.success({
              content: "已恢复！",
            });
            // 测试是否需要修改课程状态
            // this.coursesData = this.coursesData.filter(
            //   (item) =>
            //     !(
            //       item.courseID === params.courseID &&
            //       item.currNo === params.currNo
            //     )
            // );
          } else {
            this.handelClsoe();
            this.$antdMessage.error({
              content: res.message || "恢复失败!",
            });
          }
        })
        .catch((err) => {
          this.handelClsoe();
          // this.$antdMessage.error({
          //   content: "服务器错误!",
          // });
        });
    },
  },
};
</script>

<style lang="stylus" scoped>
.coursesOpened {
  padding-top: 30px;
  margin: 0 auto;
  max-width: 1200px;

  .coursesList {
    .item-list {
      display: flex;
      flex-flow: wrap;

      @media only screen and (min-width: 1200px) {
        .el-col-lg-5 {
          margin-right: calc(((1200px - (273px * 4)) / 3));
          margin-bottom: 25px;
        }

        .fourisLast {
          margin: 0;
        }
      }

      @media only screen and (max-width: 1200px) and (min-width: 768px) {
        .el-col-md-7 {
          margin-right: calc((calc(100%) / 3 / 3 / 2));
          margin-bottom: 25px;
        }

        .coursesContent {
          max-width: 273px;

          .coursesImg {
            img {
              width: 100% !important;
            }
          }
        }

        .treeisLast {
          margin: 0;
        }
      }

      @media only screen and (max-width: 767px) {
        .el-col-xs-11 {
          margin-right: calc((calc(100%) / 2 / 2 / 2 / 1.5));
          margin-bottom: 20px;
        }

        .twoisLast {
          margin-right: 0 !important;
        }
      }

      .coursesContent {
        padding: 11px 14px 0 15px;
        margin-bottom: 25px;
        position: relative;
        cursor: pointer;
        width: 273px;
        height: 435px;
        background-color: #ffffff;
        // box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.16);
        border-radius: 5px;
        overflow: hidden;
        transition: all 0.2s linear;

        .coursesImg {
          line-height: 0;

          img {
            object-fit: cover;
            width: 244px;
            height: 156px;
            border-radius: 5px;
          }
        }

        .courseInfo {
          .name {
            margin-top: 15px;
            font-family: PMingLiU-ExtB;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .pushTime {
            margin-top: 5px;
            font-family: PMingLiU-ExtB;
            font-size: 12px;
            color: #999999;
          }

          .desc {
            margin-top: 9px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #666666;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }

        .btnBox {
          position: absolute;
          bottom: 0;
          right: 0;
          left: 0;
          width: 273px;
          height: 35px;
          display: flex;
          justify-content: space-between;
          border-radius: 0px 0px 5px 5px;
          overflow: hidden;

          .updateBtnBox, .cancelBtnBox {
            flex: 1;
            line-height: 35px;
            border-top: 1px solid #d3dae4;
            text-align: center;
            font-family: PMingLiU-ExtB;
            font-size: 16px;
            color: #666;
            transition: all 0.2s linear;
          }

          .updateBtnBox:hover, .cancelBtnBox:hover {
            background: #1c4e93;
            color: #fff;
          }
        }
      }
    }

    .el-dialog__wrapper {
      .closeCourseDialog {
        margin-top: 30vh !important;
        width: 240px;
        height: 125px;
        background-color: #ffffff;
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
        border-radius: 5px;
        border: solid 1px #d6d6d6;

        .el-dialog__header {
          padding: 0;

          .el-dialog__headerbtn {
            display: none;
          }
        }

        .el-dialog__body {
          padding: 32px 40px 0;

          .content {
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #000000;

            .btnBox {
              margin-top: 19px;
              display: flex;
              justify-content: space-between;
              width: 100%;

              .el-button {
                padding: 0;
                width: 55px;
                height: 25px;
                border-radius: 5px;
                font-family: PMingLiU-ExtB;
                font-size: 14px;
              }

              .el-button--default {
                background-color: #ffffff;
                border: solid 1px #d6d6d6;
                color: #666666;
              }

              .el-button--primary {
                background-color: #02497c;
                border-color: #02497c;
              }
            }
          }
        }
      }
    }
  }
}
</style>